﻿@using Microsoft.Practices.Unity;
@using Microsoft.Practices.Unity.Configuration;
@using Microsoft.AspNet.Identity

@model BeYourMarket.Web.Models.ListingItemModel

@{
    ViewBag.Title = Model.ListingCurrent.Title;
}

@section Styles {
    <link href="~/css/formstone/lightbox.css" rel="stylesheet" />
    <link href="~/js/timepicker/bootstrap-datepicker.min.css" rel="stylesheet" />
}

<div class="body-content">

    <div class="main-section">

        @Html.Partial("_ListingContactModal", Model)

        <div class="row">
            <div class="container-fluid">
                <div class="row">
                    @Html.Partial("_UserMessage")

                    <div class="col-md-8 col-xs-12">
                        <div class="section panel-header">
                            <div class="col-md-12">
                                <h3>
                                    @Model.ListingCurrent.Title
                                    <span class="score @Model.ListingCurrent.RatingClass text-md"></span>
                                    <!-- Show edit button if administrator or the user who create the listing -->
                                    @if (Model.ListingCurrent.UserID == User.Identity.GetUserId() || User.IsInRole("Administrator"))
                                    {
                                        <a class="btn btn-primary" href="@Url.Action("ListingUpdate", "Listing", new { id = Model.ListingCurrent.ID, area = "" })"><i class="fa fa-edit"></i> [[[Edit]]]</a>
                                    }
                                </h3>

                                @if (Model.ListingCurrent.Price.HasValue)
                                {
                                    <h4>
                                        @Html.DisplayFor(x => x.ListingCurrent.PriceFormatted) @Model.ListingCurrent.ListingType.PriceUnitLabel
                                    </h4>
                                }
                                <p class="lead text-lighten">
                                    @Model.ListingCurrent.Location
                                </p>
                            </div>

                        </div>

                        <div class="panel-header bdr-b container-fluid">
                            <ul class="nav nav-tabs" role="tablist" id="mainTab">
                                <li role="presentation" class="active"><a href="#description" aria-controls="description" role="tab" data-toggle="tab"><i class="fa fa-info"></i>[[[Description]]]</a></li>
                                @if (Model.ListingCurrent.Latitude.HasValue && Model.ListingCurrent.Longitude.HasValue)
                                {
                                    <li role="presentation"><a href="#map-canvas"><i class="fa fa-map-marker"></i>[[[Maps]]]</a></li>
                                }

                                <li role="presentation">
                                    <a href="#reviewList"><i class="fa fa-star"></i>[[[Reviews]]]</a>
                                </li>

                                <li role="presentation">
                                    <a id="contactModal" data-toggle="modal" data-target="#contactModal"><i class="fa fa-envelope"></i>[[[Contact]]]</a>
                                </li>
                            </ul>
                        </div>

                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane fade active in" id="description">
                                <div class="panel panel-default bdr-t-none">
                                    <div class="panel-body">
                                        <p>
                                            @Model.ListingCurrent.Description
                                        </p>
                                    </div>

                                    <!---Pictures-->
                                    <div class="panel-heading bdr-t">
                                        <i class="fa fa-picture-o"></i> [[[Pictures]]]
                                    </div>
                                    <div class="panel-body">
                                        @if (Model.Pictures.Count > 0)
                                        {
                                            <div id="carousel-gallery" class="carousel slide" data-ride="carousel">
                                                <ol class="carousel-indicators">
                                                    @for (int i = 0; i < Model.Pictures.Count; i++)
                                                    {
                                                        <li data-target="#carousel-gallery" data-slide-to="@i"></li>
                                                    }
                                                </ol>

                                                <div class="carousel-inner" role="listbox">
                                                    @for (int i = 0; i < Model.Pictures.Count; i++)
                                                    {
                                                        <div class="item @(i == 0 ? "active" : "")">
                                                            <img style=" margin-left: auto; margin-right: auto;" alt="" src="@Model.Pictures[i].Url" data-holder-rendered="true">
                                                        </div>
                                                    }
                                                </div>

                                                <a class="left carousel-control" href="#carousel-gallery" role="button" data-slide="prev">
                                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                                    <span class="sr-only">[[[Previous]]]</span>
                                                </a>
                                                <a class="right carousel-control" href="#carousel-gallery" role="button" data-slide="next">
                                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                                    <span class="sr-only">[[[Next]]]</span>
                                                </a>

                                            </div>

                                            <div class="panel-body">
                                                <div class="row">
                                                    @foreach (var thumbnail in Model.Pictures)
                                                    {
                                                        <div class="col-xs-6 col-md-2">
                                                            <a href="@thumbnail.Url" class="boxer" title="" data-gallery="gallery" data-lightbox-gallery="photo_gallery">
                                                                <img alt="Thumbnail" src="@thumbnail.Url" style=" width: 100%; display: block;">
                                                            </a>
                                                        </div>
                                                    }
                                                </div>

                                            </div>
                                        }
                                        else
                                        {
                                            <img style="width: 100%" src="@BeYourMarket.Web.Utilities.ImageHelper.GetListingImagePath(0)" />
                                        }
                                    </div>
                                    <!---Pictures-->

                                    <table class="table">
                                        <tbody>
                                            <tr>
                                                <td>
                                                    [[[Category]]]
                                                </td>
                                                <td>
                                                    <a href="@Url.Action("Search", "Home", new { categoryId = Model.ListingCurrent.CategoryID })">@Model.ListingCurrent.Category.Name</a>
                                                </td>
                                            </tr>
                                            @if (Model.ListingCurrent.Price.HasValue)
                                            {
                                                <tr>
                                                    <td>
                                                        [[[Price]]]
                                                    </td>
                                                    <td>
                                                        @Html.DisplayFor(x => Model.ListingCurrent.PriceFormatted)
                                                    </td>
                                                </tr>
                                            }
                                            <tr>
                                                <td>
                                                    [[[Listing Type]]]
                                                </td>
                                                <td>
                                                    @Model.ListingCurrent.ListingType.Name
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    [[[Location]]]
                                                </td>
                                                <td>
                                                    @Html.DisplayFor(x => Model.ListingCurrent.Location)
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    [[[Date Posted]]]
                                                </td>
                                                <td>
                                                    @Model.ListingCurrent.Created.ToShortDateString()
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    [[[Listing ID]]]
                                                </td>
                                                <td>
                                                    @Model.ListingCurrent.ID
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    [[[Views]]]
                                                </td>
                                                <td>
                                                    @Model.ListingCurrent.ListingStats.FirstOrDefault().CountView
                                                </td>
                                            </tr>

                                            @foreach (var item in Model.ListingCurrent.ListingMetas)
                                            {
                                                <tr>
                                                    <td>
                                                        @item.MetaField.Name
                                                    </td>
                                                    <td>
                                                        @item.Value
                                                    </td>
                                                </tr>
                                            }
                                        </tbody>
                                    </table>


                                    @if (Model.ListingCurrent.Latitude.HasValue && Model.ListingCurrent.Longitude.HasValue)
                                    {
                                        <div class="panel-heading bdr-t">
                                            <i class="fa fa-map-marker"></i> [[[Map]]]
                                        </div>
                                        <div class="panel-body">
                                            <div id="map-canvas"></div>
                                        </div>
                                    }
                                </div>
                            </div>

                            <div role="tabpanel" class="tab-pane" id="contact">
                                <div class="panel panel-default bdr-t-none">
                                    @if (Model.ListingCurrent.ShowPhone && !string.IsNullOrEmpty(Model.ListingCurrent.ContactPhone))
                                    {
                                        <div class="list-group">
                                            <a data-text-swap="[[[Contact number (Click to show)]]]" data-text-original="@Model.ListingCurrent.ContactPhone" class="text-swap list-group-item "><i class="mdi-hardware-phone-iphone"></i> [[[Contact number (Click to show)]]]</a>
                                            <a href="@Url.Action("Profile", "Listing", new { id = Model.ListingCurrent.UserID })" class="list-group-item"><i class="mdi-action-view-module"></i>[[[View User's other listings]]]</a>
                                        </div>
                                    }

                                    <div class="panel-heading">
                                        <span>[[[Contact]]] @Model.User.FullName</span>
                                    </div>

                                    <a id="contactModal" data-toggle="modal" data-target="#contactModal"><i class="fa fa-envelope"></i>[[[Contact]]]</a>
                                </div>
                            </div>
                        </div>

                        @Html.Partial("~/Views/Listing/_ListingReview.cshtml", Model.ListingReviews)

                        @Html.Partial("~/Views/Listing/_ListingReviewModal.cshtml", Model)

                        <!-- Listing Hook -->
                        @Html.DoAction(HookName.Listing, Model.ListingCurrent.ID)
                    </div>

                    <div>
                        <div class="col-md-4 col-xs-12">
                            <div id="sidebar" data-spy="affix" data-offset-top="120" class="affix text-center">
                                @Html.Partial("_ListingPayment", Model.ListingCurrent)

                                <div class="panel panel-default panel-body mrg-t text-center">
                                    <a href="@Url.Action("Profile", "Listing", new { id = Model.User.Id })">
                                        <img class="img-circle profile-picture" src="@BeYourMarket.Web.Utilities.ImageHelper.GetUserProfileImagePath(Model.User.Id)" />
                                    </a>
                                    <h5>@Model.User.FullName</h5>
                                    <p class="text-lighten">
                                        [[[Joined since]]] @Model.User.RegisterDate.ToShortDateString()
                                    </p>
                                    <a href="@Url.Action("Profile", "Listing", new { id = Model.User.Id })">
                                        [[[View user's profile and other listings]]]<div>
                                            <span class="score @Model.User.RatingClass"></span>
                                            <span>@string.Format("[[[{0:N0} reviews]]]", Model.ListingReviews.Count)</span>
                                        </div>
                                    </a>

                                    <a id="contactModal" data-toggle="modal" data-target="#contactModal" class="btn btn-default btn-block">[[[Contact]]]</a>
                                </div>

                                <!-- AddToAny BEGIN -->
                                <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
                                    <span class="pull-left m-r-5"><i class="fa fa-share-alt"></i> [[[Share]]]</span>
                                    <a href="https://www.addtoany.com/share_save"></a>
                                    <a class="a2a_button_facebook"></a>
                                    <a class="a2a_button_twitter"></a>
                                    <a class="a2a_button_google_plus"></a>
                                    <a class="a2a_button_linkedin"></a>
                                </div>

                                <script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>

</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script src="~/js/timepicker/bootstrap-datepicker.js"></script>
    @Html.Partial("_LocalizationDatePicker")

    @Html.Partial("_LocalizationJQueryValidation")

    @{
        var datesDisabled = new System.Text.StringBuilder();
        foreach (var fromDate in Model.DatesBooked)
        {
            datesDisabled.AppendFormat("'{0}',", fromDate.ToShortDateString());
        }
    }

    <script type="text/javascript">
        $(document).ready(function () {
            $('.datepicker').datepicker({
                startDate: new Date(),
                daysOfWeekDisabled: "0",
                datesDisabled: [@Html.Raw(datesDisabled.ToString())],
                language: '@Context.GetPrincipalAppLanguageForRequest().ToString()'
            });
        });
    </script>


    <!-- Include Roller JS -->
    <script src="~/js/formstone/core.js"></script>
    <script src="~/js/formstone/touch.js"></script>
    <script src="~/js/formstone/transition.js"></script>
    <script src="~/js/formstone/lightbox.js"></script>

    <script>
        $(".text-swap").on("click", function () {
            var el = $(this);
            el.text() == el.data("text-swap")
              ? el.text(el.data("text-original"))
              : el.text(el.data("text-swap"));
        });
    </script>

    <script type="text/javascript">
        $(".boxer").lightbox({
            mobile: true
        });
    </script>

    @if (Model.ListingCurrent.Latitude.HasValue && Model.ListingCurrent.Longitude.HasValue)
    {
        <text>
            <script type="text/javascript">
                function initMap() {
                    var myLatlng = new google.maps.LatLng(@Model.ListingCurrent.Latitude.Value.ToString(System.Globalization.CultureInfo.InvariantCulture), @Model.ListingCurrent.Longitude.Value.ToString(System.Globalization.CultureInfo.InvariantCulture));
                    var isDraggable = $(document).width() > 480 ? true : false; // If document (your website) is wider than 480px, isDraggable = true, else isDraggable = false

                    var mapOptions = {
                        draggable: isDraggable,
                        scrollwheel: false, // Prevent users to start zooming the map when scrolling down the page
                        zoom: 14,
                        center: myLatlng
                    };

                    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map,
                        content: '@Model.ListingCurrent.Location'
                    });
                }
            </script>
        </text>
    }

    <script src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=places&callback=initMap" async defer></script>
}
